<template>
  <div class="cmt-container">
    <h3 >发表评论</h3>
    <hr>
    <textarea placeholder="请输入要BB的内容（最多吐槽120字）" maxlength="120"></textarea>

    <mt-button type="primary" size="large">发表评论</mt-button>

    <div class="cmt-list">
    	<div class="cmt-item" v-for="(item,i) in commnets" :key="item.id">
    		<div class="cmt-title">
    			第{{i + 1}}楼 &nbsp; &nbsp; 用户： {{item.user_name}} &nbsp; &nbsp; 发表时间： {{item.ctime | dateFormat}}
    		</div>
    		<div class="cmt-body">
    			{{item.content === '' ? '此用户很懒，嘛都没说' : item.content}}
    		</div>
    	</div>
    </div>

    <mt-button type="danger" size="large" plain @click="getMore">加载更多</mt-button>
  </div>
</template>

<script>
	export default{
		data(){
			return {
				pageNo: 1, // 默认展示第一页数据
				commnets: []  // 所有的评论数据
			}
		},
		created(){
			this.getComments();
		},
		methods:{
			getMore(){
				this.pageNo ++;
				this.getComments();
			},
			getComments(){ 
				// 获取新闻评论数据方法
				this.$http.get("getcomments.php?aid="+this.id+'&pageNo='+this.pageNo).then(result =>{
					console.log(result.body);
					if (result.body.status == 0) {
						// 成功
						// this.commnets = result.body.message;

						// 每当获取新评论数据的时候，不要把老输一局清空覆盖，而是应该以老数据，拼接上新数据
						this.commnets = this.commnets.concat(result.body.message)
					}else{
						// 失败
						Toast('加载新闻评论数据数据error...')
					}

				});
			}
		},
		props: ["id"]
	}
</script>

<style lang="scss" scope>
.cmt-container{
	h3{
		font-size: 18px;
	}
	textarea{
		font-size: 14px;
		height: 85px;
		margin: 0;
	}
	.cmt-list{
		margin: 5px 0;
		.cmt-item{
			font-size: 13px;
			.cmt-title{
				line-height: 30px;
				background-color: #ccc;
			}
			.cmt-body{
				line-height: 35px;
				text-indent: 2em;
			}
		}
	}
}
</style>